<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0,user-scalable=no">
    <meta name="apple-mobile-web-app-title" content="标题"> <!-- 添加到主屏后的标题（iOS 6 新增） -->
    <meta name="apple-mobile-web-app-capable" content="yes"><!-- 是否启用 WebApp 全屏模式 -->
    <meta name="apple-mobile-web-app-status-bar-style" content="white-translucent">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <title>品牌专场--爱奇诺</title>
    <link rel="stylesheet" href="../../css/mobile_reset.css">
   <!-- <link rel="stylesheet" href="../../css/brand_special/brand_special_02.css">-->
    <script>
        (function () {
            document.addEventListener('DOMContentLoaded', function () {
                var html = document.documentElement;
                var windowWidth = html.clientWidth;
                html.style.fontSize = windowWidth / 7.5 + 'px';
                // 等价于html.style.fontSize = windowWidth / 750 * 100 + 'px';
            }, false);


        })();

        // 这个7.5就是根据设计稿的横向宽度来确定的，假如你的设计稿是640
        // 那么 html.style.fontSize = windowWidth / 6.4 + 'px';
    </script>
    <style>
        .ban_poster,
        .goods_01,
        .goods_02,
        .goods_03,
        .goods_04,
        .goods_05,
        .goods_06,
        .goods_07,
        .goods_08,
        .goods_09,
        .goods_10 {
            width: 7.5rem;
            padding-top: 0.8rem;
        }
        .ban_poster a,
        .goods_01 a,
        .goods_02 a,
        .goods_03 a,
        .goods_04 a,
        .goods_05 a,
        .goods_06 a,
        .goods_07 a,
        .goods_08 a,
        .goods_09 a,
        .goods_10 a {
            display: block;
            width: 100%;
            height: 100%;
            background-color: #f2aad0;
            opacity: 0.5;
        }
        .ban_poster {
            height: 4.22rem;
            background: url(../../images/brand_special_02/ban_poster.jpg) center no-repeat;
            background-size: 7.5rem 4.22rem;
        }
        .goods_01 {
            height: 7.78rem;
            background: url(../../images/brand_special_02/h5_goods01.jpg) center no-repeat;
            background-size: 7.5rem 7.78rem;
        }
        .goods_02 {
            height: 7.23rem;
            background: url(../../images/brand_special_02/h5_goods02.jpg) center no-repeat;
            background-size: 7.5rem 7.23rem;
        }
        .goods_03 {
            height: 7.27rem;
            background: url(../../images/brand_special_02/h5_goods03.jpg) center no-repeat;
            background-size: 7.5rem 7.27rem;
        }
        .goods_04 {
            height: 7.23rem;
            background: url(../../images/brand_special_02/h5_goods04.jpg) center no-repeat;
            background-size: 7.5rem 7.23rem;
        }
        .goods_05 {
            height: 7.26rem;
            background: url(../../images/brand_special_02/h5_goods05.jpg) center no-repeat;
            background-size: 7.5rem 7.26rem;
        }
        .goods_06 {
            height: 8.15rem;
            background: url(../../images/brand_special_02/h5_goods06.jpg) center no-repeat;
            background-size: 7.5rem 8.15rem;
        }
        .goods_07 {
            height: 7.26rem;
            background: url(../../images/brand_special_02/h5_goods07.jpg) center no-repeat;
            background-size: 7.5rem 7.26rem;
        }
        .goods_08 {
            height: 7.24rem;
            background: url(../../images/brand_special_02/h5_goods08.jpg) center no-repeat;
            background-size: 7.5rem 7.24rem;
        }
        .goods_09 {
            height: 7.26rem;
            background: url(../../images/brand_special_02/h5_goods09.jpg) center no-repeat;
            background-size: 7.5rem 7.26rem;
        }
        .goods_10 {
            height: 7.73rem;
            background: url(../../images/brand_special_02/h5_goods10.jpg) center no-repeat;
            background-size: 7.5rem 7.73rem;
        }

    </style>
</head>
<body>
    <div class='section'>
        <div class="ban_poster"></div>
        <div class="goods_01">
            <a href="#"></a>
        </div>
        <div class="goods_02">
            <a href="#"></a>
        </div>
        <div class="goods_03">
            <a href="#"></a>
        </div>
        <div class="goods_04">
            <a href="#"></a>
        </div>
        <div class="goods_05">
            <a href="#"></a>
        </div>
        <div class="goods_06">
            <a href="#"></a>
        </div>
        <div class="goods_07">
            <a href="#"></a>
        </div>
        <div class="goods_08">
            <a href="#"></a>
        </div>
        <div class="goods_09">
            <a href="#"></a>
        </div>
        <div class="goods_10">
            <a href="#"></a>
        </div>
    </div>
</body>
</html>